<template>
  <div class="wrapper">
    <!-- 头部 -->
    <header>
      <img src="../assets/bgtop.png" />
    </header>

    <!-- 标题 -->
    <h1>东软环保公众监督系统</h1>
    <div class="title">
      <p></p>
      <p>公众监督员端</p>
      <p></p>
    </div>

    <!-- 登录表单 -->
    <section>
      <div class="input-box">
        <i class="fa fa-user-o"></i>
        <input
          type="text"
          v-model="supervisorForm.telId"
          placeholder="输入手机号"
        />
      </div>
      <div class="input-box">
        <i class="fa fa-lock"></i>
        <input
          type="password"
          v-model="supervisorForm.password"
          placeholder="输入登录密码"
        />
      </div>
      <div class="reg-box">
        <p @click="toRegister">注册</p>
        <p>忘记密码?</p>
      </div>
      <div class="button-box" @click="login">登录</div>
    </section>
  </div>
</template>

<script setup>
import { reactive, inject } from "vue";
import { useRouter } from "vue-router";
import { setSessionStorage } from "../common.js";

const router = useRouter();
const axios = inject("axios");

const supervisorForm = reactive({
  telId: "",
  password: "",
});

const toRegister = () => {
  router.push("/register");
};

const login = () => {
  //表单验证
  if (supervisorForm.telId == "") {
    alert("电话号码不能为空！");
    return;
  }
  if (supervisorForm.telId.length != 11) {
    alert("电话号码必须为11位长度！");
    return;
  }
  if (isNaN(supervisorForm.telId)) {
    alert("电话号码必须由数字组成！");
    return;
  }
  if (supervisorForm.password == "") {
    alert("密码不能为空！");
    return;
  }

  axios
    .post("supervisor/getSupervisorByIdByPass", supervisorForm)
    .then((response)=>{
      if(response.data!=''){
        setSessionStorage('supervisor',response.data);
        router.push('/selectGrid');
      }else{
        alert('手机号码或密码输入不正确！');
      }
    })
    .catch((error)=>{
      console.log(error);
    });
};
</script>

<style scoped>
/************************* 总容器 ***********************/
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #cfe8e9;
}

/************************* header ***********************/
header {
  width: 100%;
}
header img {
  display: block;
  width: 100%;
}

/************************* 标题 ***********************/
h1 {
  text-align: center;
  color: #46a34f;
  font-size: 7vw;
  font-weight: 700;
}
.title {
  width: 70%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #46a34f;
  font-size: 4vw;
  margin-top: 3vw;
  margin-bottom: 6vw;
}
.title p:first-child,
.title p:last-child {
  width: 20vw;
  height: 1px;
  background-color: #68c56f;
}

/************************* 登录表单 ***********************/
section {
  width: 86vw;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 2.4vw;

  box-sizing: border-box;
  padding: 1vw 6vw 5vw;
}
section .input-box {
  width: 100%;
  height: 12vw;
  border: solid 1px #ccc;
  border-radius: 2vw;
  margin-top: 5vw;

  display: flex;
  align-items: center;
}
section .input-box i {
  margin: 0 3.6vw;
  font-size: 5.4vw;
  color: #ccc;
}
section .input-box input {
  border: none;
  outline: none;
}
section .reg-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 5vw;
  margin-bottom: 2vw;
}
section .reg-box p {
  font-size: 3.3vw;
  color: #2d727e;
  user-select: none;
}
section .button-box {
  width: 100%;
  height: 13vw;
  border-radius: 2vw;
  background-color: #70b0bc;

  color: #fff;
  text-align: center;
  line-height: 13vw;
  font-size: 4.6vw;
  letter-spacing: 1vw;
  user-select: none;
}
</style>